<template>
    <li @click="playMusic">
        <slot></slot>
        <div class="li-box">
            <div class="left">
                <div class="t-big">
                {{ item.name }}
                </div>
                <div class="t-small">
                <i v-if="item.song.privilege.maxbr > 320000"></i>
                {{ item.song.artists[0].name }} - {{ item.name }}
                </div>
            </div>
            <div class="right">
                <span></span>
            </div>
        </div>
    </li>
</template>

<script>
export default {
    name: 'Listitem',
    props: {
        item: Object,
        num: {
            type: Number,
            default: 0
        }
    },
    methods: {
        playMusic() {
            this.$root.playingMusic.musicID = this.item.id;
            this.$root.playingMusic.playList.push(this.item);
        }
    },
    // 把
    mounted() {
        this.$root.playingMusic.idList.push(this.item.id);
    }
}
</script>

<style lang="less" scoped>
li {
    display: flex;
    padding-left: 10px;
    background-color: #fcfcfd;
    .li-box {
        display: flex;
        flex: 1;
        align-items: center;
        border: 0 solid #f6f6f6;
        border-bottom-width: 1px;
        .left {
            // max-width: 295px;
            width: 80vw;
            flex: 1 1 auto;
            text-align: left;
            padding: 6px 0;
            .t-big {
                font-size: 17px;
                color: #333;
                line-height: 25px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
            }
            .t-small {
                font-size: 12px;
                color: #888;
                line-height: 18px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: normal;
                i {
                    display: inline-block;
                    width: 12px;
                    height: 8px;
                    background: url(../assets/index_icon_2x.png) no-repeat;
                    background-size: 166px 97px;
                    background-position: 0 0;
                }
            }
        }
        .right {
            display: flex;
            align-items: center;
            width: 42px;
            height: 55px;
            line-height: 55px;
            box-sizing: border-box;
            padding: 0 10px;
            span {
                display: inline-block;
                width: 22px;
                height: 22px;
                background: url(../assets/index_icon_2x.png) no-repeat;
                background-size: 166px 97px;
                background-position: -24px 0;
            }
        }
    }
    &:nth-child(-n+3) .num {
        color: #dd001b;
    }
}

</style>
